<template>
    <el-form
        :model="menuform"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
    >
        <el-form-item label="名称" prop="name">
            <el-input v-model="menuform.name"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path">
            <el-input v-model="menuform.path"></el-input>
        </el-form-item>
        <el-form-item label="排序">
            <el-input v-model="menuform.sort"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { ElMessage } from 'element-plus'
import { api } from '@/api/index'
const { RequestMenuAdd } = api
const props = defineProps({
    parentId: {
        type: Number,
        default: 0,
    },
})
const emit = defineEmits(['close'])

const menuform: Ref<{ name: string; path: string; sort: number }> = ref({
    name: '',
    path: '',
    sort: 0,
})
const rules = ref({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
})

const onSubmit = async () => {
    const menu = {
        roleId: 1,
        parentId: props.parentId,
        nodeType: 0,
        menuName: menuform.value.name,
        path: menuform.value.path,
    }

    const data = await RequestMenuAdd(menu)
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        ElMessage.success('添加菜单成功!')
        emit('close')
    }
}
</script>

<style scoped></style>
